<template lang='pug'>
.saleList
  el-input(placeholder="请输入商品名称" clearable v-model="name" style='width:150px' size="mini")
  el-select(v-model="category_id" clearable placeholder="请选择" size="mini" style='margin-left:5px')
    el-option(v-for="item in crtegory"
      :key="item.id"
      :label="item.name"
      :value="item.id")
  el-button(type="primary" @click="onSea" style='margin-left:5px' size="medium" icon="el-icon-search") 查找
  el-button(type="primary" style='margin-left:5px' size="medium" @click="add") + 上架新商品

  el-table(:data="list" style="width: 100%" border  v-loading="loading")
    details-box
    el-table-column(label="ID" prop="id")
    el-table-column(label="名称" prop="name")
    el-table-column(label="分类" prop="category_name")
    el-table-column(label="单价(元)" prop="price")
    el-table-column(label="库存" prop="stock")
    el-table-column(label="访问量" prop="visits")
    el-table-column(label="上架时间" prop="sale_time")
    el-table-column(label="操作")
      template(slot-scope="scope")
        el-button(type="primary" size="mini" @click="onEdit(scope.row)") 调 整
        el-button(type="danger" size="mini" @click="onShelf(scope.row.id)") 下 架
  footer(style='text-align:right')
    el-pagination(
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page+1"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total")
  sale-add(v-model='addShow' @add="onadd")
  SaleEdit(:row="row" v-model="show" @edit="onedit")
</template>
<script>
import DetailsBox from '@/components/shop/DetailsBox.vue'
import SaleAdd from '@/components/shop/SaleAdd.vue'
import SaleEdit from '@/components/shop/SaleEdit.vue'
export default {
  components: {
    DetailsBox,
    SaleAdd,
    SaleEdit
  },
  data() {
    return {
      list:[],
      page:0,
      limit:5,
      name:'',
      category_id:"",
      total:0,
      loading:false,
      crtegory:[],
      row:{},
      show:false,
      addShow:false
    }
  },
  created() {
    this.axios.get('/category/list').then(({data}) => {
      if(!data.errcode) {
        console.log(data);
        this.crtegory = data.data.list
      }
    })
    this.data()
  },
  methods: {
    data() {
      this.loading = true
      const { page, limit, name, category_id } = this;
      this.axios.get('/sale/list',{params:{
        page, limit, name, category_id
      }}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.list = data.data.list
          this.total = data.data.total
          this.loading = false
        }
      })
    },
    // 上架
    add() {
      this.addShow = true
    },
    onadd() {
      this.data()
    },
    // 调整
    onEdit(row) {
      this.row = row
      this.show = true
    },
    onedit() {
      this.data()
    },
    handleSizeChange(size){
      this.limit = size
      this.page = 0
      this.data()
    },
    handleCurrentChange(size) {
      this.page = size-1
      this.data()
    },
    // 搜索
    onSea() {
      this.data()
    },
    // 下架
    onShelf(id) {
      this.$confirm('商品下架后顾客不可选择购买，确认操作？', {
        confirmButtonText: '确认下架',
        cancelButtonText: '暂不操作',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '下架成功!'
        })
        this.axios.post('/sale/unpublish',{id}).then(({data}) => {
          if(!data.errcode) {
            this.data()
          }
        })
        this.data()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下架'
        });
      })
    }
  },
}
</script>
<style lang="sass">
.saleList
  padding: 0 10px
  .el-button
    padding: 5px
</style>
